<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>大类别查询</title>
		<link rel="stylesheet" href="../../static/assets/css/normalize.css">
		<link rel="stylesheet" href="../../static/assets/css/bootstrap.min.css">
		<link rel="stylesheet" href="../../static/assets/css/font-awesome.min.css">
		<link rel="stylesheet" href="../../static/assets/css/themify-icons.css">
		<link rel="stylesheet" href="../../static/assets/css/pe-icon-7-filled.css">
		<link rel="stylesheet" href="../../static/assets/css/flag-icon.min.css">
		<link href="../../static/assets/weather/css/weather-icons.css" rel="stylesheet" />
		<link href="../../static/assets/calendar/fullcalendar.css" rel="stylesheet" />
		<link href="../../static/assets/css/charts/chartist.min.css" rel="stylesheet">
		<link href="../../static/assets/css/lib/vector-map/jqvmap.min.css" rel="stylesheet">
		<link href="../../static/css/pagination.css" rel="stylesheet">
		<link rel="shortcut icon" href="../../static/images/favicon.ico">
		<style>
			body{background: none;overflow-x:hidden; }
			.card-header{display: flex;justify-content: space-between;}
			.card-header>*{margin: auto 0;}
			.table th a{color: #ffc107;}
			.search .form-group{margin-right: 30px;margin-left: 0;}
			.search .form-group input{margin-left: 10px;width: 180px;}
			.search .form-group .btn-info{width: auto;}
			.search .form-inline{margin-bottom: 10px;}
			.badge-complete{background: #00c292;color: white;padding: 10px;font-weight: normal;}
			.badge-pending{background: #fb9678;color: white;padding: 10px;font-weight: normal;}
			td{vertical-align: middle !important;}
			.pagination li{margin: 0;}
		</style>
	</head>
	<body>
		<form id="searchForm" name="searchForm" class="form-horizontal text-center my" method="post">
			<div class="card search">
				<div class="card-body">
					<div class="form-inline">
						<div class="form-group">
							<label class="form-control-label" >类别名称:</label>
							<input class="form-control" type="text" name="pcName"  placeholder="请输入名称" />
						</div>
						<div class="form-group">
							<input style="cursor: pointer;" class="form-control btn-info" onclick="searchPc()" type="button" value="查询" />
							<input style="cursor: pointer;" class="form-control btn-info" type="button" onclick="cleanUp()" value="清空" />
						</div>
					</div>
				</div>
			</div>		
		</form>
		<form name="delForm">
			<div class="card">
				<div class="card-header">
	            	<strong class="card-title">大类别信息</strong>
	            	<div>
	            		<button  type="button" class="btn btn-primary btn-sm" onclick="addpage()" >增加<span class="glyphicon glyphicon-plus"></span></button>				
	            		<button  type="button" class="btn btn-danger btn-sm" onclick="del();" >删除<span class="glyphicon glyphicon-minus"></span></button>				
	            	</div>
	            </div>
	            <div class="card-body">
					<table class="table">
	                    <thead class="thead-dark">
	                        <tr>
								<th>#</th>
	                            <th><a onclick="selectAll()" href="javascript:;">全选</a></th>
								<th>大类别名称</th>
								<th>大类别类型</th>
								<th>大类别配图</th>
								<th>操作</th>
							</tr>
						</thead>
						<tbody>
							<tr>
								<td>1</td>
								<td><input type="checkbox" name="ids" value="1"></td>
								<td>名称</td>
								<td><button class="btn btn-sm btn-primary" type="button" onclick="editpage('1');">修改</button></td>
							</tr>
						</tbody>
					</table>	
				</div>
				<div class="card-footer"></div>
			</div>					
		</form>
	</body>
	<script src="../../static/assets/js/vendor/jquery-2.1.4.min.js"></script>
	<script src="../../static/layer/layer.js"></script>
	<script src="../../static/js/ajax.js"></script>
	<script src="../../static/js/page.js"></script>
	<script type="text/javascript">
		let options = {
			url:"system/parCategory/query",
			//装载分页标签的div
			div:$(".card-footer"),
			//更新数据的tbody
			tbody:$("tbody"),
			success:function(msg){
				//回显列表数据
				let dataList = msg.data.list;
				for(let i=0;i<dataList.length;i++){
					let data = dataList[i];
					let tr = $("<tr></tr>");
					let td0 = $("<td>"+(msg.data.startRow+i)+"</td>");
					let td1 = $("<td><input type=\"checkbox\" name=\"ids\" value=\""+data.pcId+"\"></td>");
					let td2 = $("<td>"+data.pcName+"</td>");
					let td3 = $("<td>"+(data.pcType==0?"商家":"频道")+"</td>");
					let td4 = $("<td><img src=\""+data.pcImg+"\" width=\"50\" height=\"50\"></td>");
					let td5 = $("<td><button class=\"btn btn-sm btn-primary\" type=\"button\" onclick=\"editpage('"+data.pcId+"')\">修改</button></td>");
					tr.append(td0);tr.append(td1);tr.append(td2);tr.append(td3);tr.append(td4);tr.append(td5);
					$("tbody").append(tr);
				}
			}
		};
			
		$(function(){
			pageRequest(options);
		})
		
		function searchPc(){
			options.data=$("[name='searchForm']").serialize();
			pageRequest(options);
		}
		
		function addpage(){
			location.href = "paCatAdd.html";
		}
		function editpage(id){
			location.href = "paCatEdit.html?id="+id;
		}
		
		function del(){
			var idsinput = $("input[name='ids']:checked");
			if (idsinput.length == 0) {
				layer.msg("请先选择要删除的类别!");
				return;
			}
			
			layer.confirm("确定删除么",{icon:3,yes:function (index){
				ajaxHttp({
					type:"delete",
					url:"system/parCategory/deleteByIds",
					data:$("[name='delForm']").serialize(),
					success:function(msg){
						if(msg.code==1){
							location.href="parCatList.html";
						}else{
							layer.alert(msg.desc,{icon:5,
								yes:function(index){
									location.href="parCatList.html";
									layer.close(index);
								},
								cancel:function(index){
									location.href="parCatList.html";
									layer.close(index);
								}
							});
							
						}
					}
				})
				layer.close(index);
			}})
			
		}
		
		//全选
		function selectAll(){
			var inpts = $("input[name='ids']");
			var ckinpts = $("input[name='ids']:checked");
			if (inpts.length == ckinpts.length) {
				$("input[name='ids']").prop("checked",false);
			}else{
				$("input[name='ids']").prop("checked",true);
			}
		}
		//清空
		function cleanUp(){
			$("#searchForm input[type='text']").val("");
		}
	</script>
</html>